<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			#ad{
				width:200px ;
				height: 112px;
				background:url(img/dog.png) no-repeat;
				position:absolute;
				left:0;
				top:0;
			}
		</style>
		<script>
			
			window.onload=function(){
				//抓元素
				var ad=document.getElementById("ad");
				var close=document.getElementById("close");
				//获得可视区域的宽高
				var win_height=document.documentElement.clientHeight;
				var win_width=document.documentElement.clientWidth;
				
				//计算可以到达的最大的top值和left值
				var max_top=win_height-ad.offsetHeight;
				var max_left=win_width-ad.offsetWidth;
				var x=1,y=1;
				//定时器调用的函数
				function run(){
					var old_left=ad.offsetLeft;
					var old_top=ad.offsetTop;
					
					var new_left=old_left+x;
					var new_top=old_top+y;
					
					ad.style.left=new_left+'px';
					ad.style.top=new_top+'px';
					if(new_top==max_top || new_top==0)
					{
						y=y*-1;
					}
					if(new_left==max_left || new_left==0)
					{
						x=x*-1;
					}
				}
				//定时器调用的函数结束
				
				//设置定时器，每隔一段时间变化一次left和top值
				var timer=setInterval(run,3);
					
					
					//定时器结束
					
					//给元素加鼠标移入事件
					ad.onmouseover=function(){
						//停止定时器
						clearInterval(timer);
					}
					//给ad加鼠标移出事件
					ad.onmouseout=function(){
						//恢复定时器
						timer=setInterval(run,3);
					}
					
					//点击关闭
					close.onclick=function(){
						ad.style.display='none';
					}
			}
		</script>
	</head>
	<body>
		<div id='ad'>
			<img src="img/close.png" id='close'/>
		</div>
	</body>
</html>
